<style>
    #zzdz-components-others .layui-card-header {
        font-weight: 600;
    }

    #zzdz-components-others p {
        margin-bottom: 10px
    }
    #zzdz-components-others .layui-badge {
        line-height: 20px;
        margin: .25rem .5rem .25rem 0;
    }
    #zzdz-components-others .alert {
        margin-bottom: .75rem;
    }
</style>
<div class="layui-fluid layui-anim zzdz-anim" id="zzdz-components-others" lay-title="其他组件">
    <div class="layui-row layui-col-space8 zzdz-container">
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">Tag标签</div>
                <div class="layui-card-body">
                    <p>样式一</p>
                    <div>
                        <span class="layui-badge zzdz-tag-green">zzdz-tag-green</span>
                        <span class="layui-badge zzdz-tag-magenta">zzdz-tag-magenta</span>
                        <span class="layui-badge zzdz-tag-orange">zzdz-tag-orange</span>
                        <span class="layui-badge zzdz-tag-red">zzdz-tag-red</span>
                        <span class="layui-badge zzdz-tag-volcano">zzdz-tag-volcano</span>
                        <span class="layui-badge zzdz-tag-gold">zzdz-tag-gold</span>
                        <span class="layui-badge zzdz-tag-lime">zzdz-tag-lime</span>
                        <span class="layui-badge zzdz-tag-cyan">zzdz-tag-cyan</span>
                        <span class="layui-badge zzdz-tag-blue">zzdz-tag-blue</span>
                        <span class="layui-badge zzdz-tag-geekblue">zzdz-tag-geekblue</span>
                        <span class="layui-badge zzdz-tag-purple">zzdz-tag-purple</span>
                    </div>
                    <p>样式二</p>
                    <div>
                        <span class="layui-badge zzdz-bg-green">.zzdz-bg-green</span>
                        <span class="layui-badge zzdz-bg-magenta">zzdz-bg-magenta</span>
                        <span class="layui-badge zzdz-bg-orange">zzdz-bg-orange</span>
                        <span class="layui-badge zzdz-bg-red">zzdz-bg-red</span>
                        <span class="layui-badge zzdz-bg-volcano">zzdz-bg-volcano</span>
                        <span class="layui-badge zzdz-bg-gold">zzdz-bg-gold</span>
                        <span class="layui-badge zzdz-bg-lime">zzdz-bg-lime</span>
                        <span class="layui-badge zzdz-bg-cyan">zzdz-bg-cyan</span>
                        <span class="layui-badge zzdz-bg-blue">zzdz-bg-blue</span>
                        <span class="layui-badge zzdz-bg-geekblue">zzdz-bg-geekblue</span>
                        <span class="layui-badge zzdz-bg-purple">zzdz-bg-purple</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">Alert告警提示</div>
                <div class="layui-card-body">
                    <div class="alert">
                        <span class="zzdz-alert-base zzdz-alert-success">Success Tips</span>
                    </div>
                    <div class="alert">
                        <span class="zzdz-alert-base zzdz-alert-info">Informational Notes</span>
                    </div>
                    <div class="alert">
                        <span class="zzdz-alert-base zzdz-alert-warn">Warning Message</span>
                    </div>
                    <div class="alert">
                        <span class="zzdz-alert-base zzdz-alert-error">Error Message</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>